package cn.liu.jetpack_demo.pages

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController

@ExperimentalFoundationApi
@Composable
fun StickyHeaderScreen(navController: NavController) {
  val sections = listOf(
    "Section 1",
    "Section 2",
    "Section 3",
    "Section 4",
    "Section 5",
    "Section 6",
    "Section 7",
    "Section 8",
    "Section 9",
    "Section 10"
  )

  LazyColumn (
    contentPadding = PaddingValues(all = 12.dp),
    verticalArrangement = Arrangement.spacedBy(12.dp)
  ) {

    sections.forEach {section ->
      stickyHeader {
        Text(
          modifier = Modifier.fillMaxWidth().background(Color.LightGray),
          text = section)
      }
      items(10) {
        Text(text = "Item $it from the $section")
      }
    }
  }
}

@ExperimentalFoundationApi
@Preview(name = "StickyHeaderScreen")
@Composable
private fun PreviewStickyHeaderScreen() {
  StickyHeaderScreen(navController = rememberNavController())
}